<template>
 <div class="index">
    <el-container>
    <div class="side">
       <el-aside  style="background-color: #465161';height:100%;">
      <el-menu>
        <p class="pp">后台管理平台</p>
        <el-submenu v-for="(item,index) in list" :index="item.title" :key="item.title+index">
          <template slot="title">{{item.title}}</template>
          <el-menu-item-group v-for="(item1,index1) in item.title1" :key="item1.title+index1">
            <template v-if="!item1.title1" slot="title">
               <div @click="SlideSwitch(item1.title)">
              <router-link active-class="color" :to="item1.path">{{item1.title}}</router-link>
              </div>
            </template>
            <el-submenu v-if="item1.title1" :index="item1.title">
              <template slot="title">{{item1.title}}</template>
              <el-menu-item-group  v-for="(item2,index2) in item1.title1" :key="item2.title+index2">
                <template slot="title">
                  <!-- <p
                    class="p"
                    :class="item2.path==path?'color':''"
                    @click="path==item2.path?'':SlideSwitch(item2.path,item2.title)"
                  >{{item2.title}}</p> -->
                  <div @click="SlideSwitch(item2.title)">
                     <router-link active-class="color" :to="item2.path">{{item2.title}}</router-link>
                  </div>
                </template>
              </el-menu-item-group>
            </el-submenu>
          </el-menu-item-group>
        </el-submenu>
      </el-menu>
    </el-aside>
    </div>
        <el-container>
          <el-header style="  font-size: 12px">
          <Cartt :name="name">
          </Cartt>
          </el-header>
          <el-main>
            <router-view />
          </el-main>
        </el-container>
  </el-container>
 </div>
  
</template>

<script>
import list from "../../assets/asidewebpack";
import axios from "axios";
import Cartt from '../Cart'
export default {
  components:{
    Cartt
  },
  data() {
    return {
      list,
      name: '数据操作'
    };
  },
  created(){
   
  },
  methods: {
    SlideSwitch(name) {
      // this.path = path;
      this.name = name
      // this.$router.replace({
      //   path
      // });
    },
  }
};
</script>
<style>
.index{
  height: 100%;
}
.index .el-container{
  height: 100%;
}
.index .el-aside{
  width: 240px!important;
  color: #333;
  padding-bottom: 50px;
}
.index  .side{
  background: #465161;
  height: 100%;

}

.index .el-submenu__title .el-submenu__title{
  height: 30px;
  line-height: 30px;
}
.pp{
  font-size: 20px;
  font-weight: 600;
  color: white;
  margin:40px 0 ;
}
.index .el-header {
  position: relative;
}
.index .el-menu-item-group__title a{
  color: rgba(255, 255, 255, .85);
}
.index .el-menu-item-group__title {
  padding-left: 30px !important;
  text-align: left;
  line-height: 40px !important;
  padding: 0;

}
.index .el-menu-item-group .el-menu-item-group{
  height: 30px;
  line-height: 30px;
}
.index .el-submenu__title {
  text-align: left;
  color: rgba(255, 255, 255, .85)!important;
  position: relative;
}
.p {
  cursor: pointer;
  color:rgba(255, 255, 255, .85); 
}
.index .el-header {
  background-color: #b3c0d1;
  color: #333;
  line-height: 60px;
}
.index .el-submenu__icon-arrow {
  font-size: 12px;
}
.box .el-submenu__title {
  font-size: 12px !important;
}
.index .el-submenu .el-submenu .el-submenu__title {
  font-size: 12px !important;
  padding-left: 30px !important;
  height: 40px !important;
  line-height: 40px !important;
}
.index .el-submenu .el-submenu .el-menu-item-group__title {
  padding-left: 50px !important;
}
.color {
  color: sandybrown!important;
}
.index .el-menu{
  background: #465161!important;
}
</style>